import React, { useCallback } from 'react'
import { Image, Tooltip } from 'antd'
import CaseBox from './Box'
import CaseSortTitle from './Title'
import TopTitleBox from './TopTitleBox'

import { imgPathMap } from '@/views/utils/statusMap'

import styles from './Case.module.scss'

const imgStyle = {
  height: '170px',
  maxWidth: '100%',
  borderRadius: 6,
  border: '1px solid rgba(29, 29, 53, 0.15)',
  boxShadow: '0px -1px 0 0 #e8e8e8 inset',
}

const CaseImage = ({ data, reinforceType }) => {
  const { 0: origin, 1: adv, 2: def } = imgPathMap
  console.log('%%%%%%%%66666%%%%%%%', reinforceType)
  const getResultData = useCallback((nowData) => {
    return (
      <div className={styles.reInforceCase}>
        <Tooltip title={nowData[0]}>
          <p className={styles.reInforceCaseName}>{nowData[0]}</p>
        </Tooltip>
        <p className={styles.boldFont}>{Number(nowData[2]).toFixed(1) + '%'}</p>
      </div>
    )
  }, [])

  return (
    <div className={styles.imageBox}>
      <CaseBox title={origin[2]}>
        <TopTitleBox>{origin[3]}</TopTitleBox>
        <Image style={imgStyle} src={data[origin[0]]} />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[origin[1]])}
      </CaseBox>
      <CaseBox title={adv[2]}>
        <TopTitleBox>{adv[3]}</TopTitleBox>
        <Image style={imgStyle} src={data[adv[0]]} />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[adv[1]])}
      </CaseBox>
      <CaseBox title={def[2]}>
        <TopTitleBox>{reinforceType ? def[4] : def[3]}</TopTitleBox>
        <Image style={imgStyle} src={data[def[0]]} />
        <CaseSortTitle>分类结果Top5：</CaseSortTitle>
        {getResultData(data[def[1]])}
      </CaseBox>
    </div>
  )
}
export default CaseImage
